<template>
  <view class="container">
    <view class="content d-rn d-ac">
      <view class="content-head d-rn d-ac d-jc">
        <view class="content-head-left">
          <u-avatar
            :size="72"
            :src="baseUrl + userInfo.avatar"
            v-if="userInfo.avatar"
          ></u-avatar>
          <u-avatar
            :text="
              userInfo.employeeName.charAt(userInfo.employeeName.length - 1)
            "
            :fontSize="18"
            randomBgColor
            :size="72"
            v-else
          ></u-avatar>
        </view>
        <view class="content-head-right d-cn">
          <text>{{ userInfo.employeeName }}</text>
          <text>{{ userInfo.phone }}</text>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list-one d-rn d-ac d-jb" @click="handleDetails">
        <view class="list-one-left d-rn d-ac">
          <image src="../../static/img/idcard.png" mode=""></image>
          <text>{{ $t('personal_info') }}</text>
        </view>
        <view class="list-one-right">
          <image src="../../static/img/right.png" mode=""></image>
        </view>
      </view>
      <!-- <view class="list-one d-rn d-ac d-jb" @click="handleMessage">
				<view class="list-one-left d-rn d-ac">
					<image src="../../static/img/minesuo.png" mode=""></image>
					<text>消息</text>
				</view>
				<view class="list-one-right">
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
      <view class="list-one d-rn d-ac d-jb" @click="handleUpdateMi">
        <view class="list-one-left d-rn d-ac">
          <image src="../../static/img/minesuo.png" mode=""></image>
          <text>{{ $t('modify_password') }}</text>
        </view>
        <view class="list-one-right">
          <image src="../../static/img/right.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="footer d-rn d-ac d-jc" @click="handleLoginOut">
      <text class="d-rn d-ac d-jc">{{ $t('logout') }}</text>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {};
  },
  onLoad() {},
  onShow() {
    this.$store.dispatch("actionGetUserInfo");
  },
  methods: {
    handleDetails() {
      this.goLink(`/pages/mineDetail/index`);
    },
    handleUpdateMi() {
      this.goLink(`/pages/updateMi/index`);
    },
    handleMessage() {
      this.goLink(`/pages/message/index`);
    },
    handleLoginOut() {
      uni.showModal({
        title: this.$t('prompt'),
        confirmColor: "#FDC41F",
        content: this.$t('confirm_logout'),
        success: (t) => {
          if (t.confirm) {
            uni.showToast({
              title: this.$t('logout_success'),
              icon: "none",
              success: () => {
                setTimeout(() => {
                  this.$store.commit("setUserInfo", null);
                  uni.reLaunch({
                    url: "/pages/login/index",
                  });
                }, 1000);
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;

  .content {
    width: 100%;
    height: 300rpx;
    background-color: #ffd03d;

    &-head {
      padding: 42rpx;
      box-sizing: border-box;

      &-left {
        margin-right: 30rpx;

        image {
          width: 132rpx;
          height: 132rpx;
          border-radius: 50%;
          background: #efefef;
        }
      }

      &-right {
        text:nth-of-type(1) {
          margin-bottom: 20rpx;
          font-size: 36rpx;
          color: #333333;
        }
      }
    }
  }

  .list {
    width: 100%;
    background-color: #ffffff;

    &-one {
      padding: 24rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;

      &-left {
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }

      &-right {
        image {
          width: 48rpx;
          height: 32rpx;
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 134rpx;
    background-color: #ffffff;
    margin-top: 20rpx;

    text {
      width: 702rpx;
      height: 86rpx;
      background: #fed72e;
      border-radius: 43px;
      box-shadow: 0px 4px 8px 0px rgba(250, 222, 78, 0.5);
    }
  }
}
</style>
